<template>
  <div id='show_time' class='show_time' ref='show_time'>
      <div class="st"><span>{{stime}}</span></div>
      <div class="text">{{stext}}</div>
      <div class="sc"><span>{{scount}}</span></div>
      <!-- <span>{{sstatus}}</span> -->
  </div>
</template>

<script>

export default {
  name: "fbTimerCount",
  data(){
      return {
          stime:'',
          stext:'',
          scount:'',
          // sstatus:true,
          tarhour:"",
      }
  },
  methods:{
    //   获取时间方法
    taketime(){
      var NowDate = new Date();
      var day=NowDate.getDate();
      var month=NowDate.getMonth()+1;
      var year=NowDate.getFullYear();
      var hour=NowDate.getHours();
      this.stime = `${year}年${month}月${day}日`;
      if(hour%2 == 0){
        if (hour==0) {
          this.tarhour=0;
        }else this.tarhour=hour;
        this.countDown(NowDate,year,month,day);
      }else{
        this.tarhour=hour-1;
        this.countDown(NowDate,year,month,day);
      }
      this.$parent.tarhour=this.tarhour;
      if (this.tarhour<10) {
          this.stext=`0${this.tarhour} : 00`;
      }else this.stext=`${this.tarhour} : 00`;
    },
    countDown(NowDate,year,month,day){
      let leftTime=year+ '/' + month + '/' + day +' '+ (this.tarhour+2)+':00:00';
        leftTime=new Date(leftTime).getTime();
        let offTime=leftTime-NowDate.getTime();
        let seconds=Math.floor((offTime/1000)%60);
        let mins=Math.floor((offTime/1000/60)%60);
        let hours=Math.floor((offTime/1000/3600)%24);
        if (seconds<10) {
          seconds="0"+seconds;
        }
        if (mins<10) {
          mins="0"+mins;
        }
        if (hours<10) {
          hours="0"+hours;
        }
        this.scount="距结束："+hours+":"+mins+":"+seconds;
    },
  },
  mounted(){
    this.taketime();
    this.scount =setInterval(()=>{
      this.taketime();
    },500)
  },
  unmounted() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="less" scoped>
.show_time{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  grid-template-areas: 'text st''text sc';
  
  .st{
    grid-area: st;
    text-align: left;
    padding-top: 18px;
    font-size: 14px;
  }
  .text{
    grid-area: text;
    text-align: right;
    padding: 20px;
    padding-right: 12px;
    font-size: 24px;
  }
  .sc{
    grid-area: sc;
    text-align: left;
    font-size: 14px;
  }
}
</style>